<template>
	<view class="couserdeatil-container">
		<u-navbar title="课程详情" leftText="返回" :autoBack="true" bgColor="#98c39a">

		</u-navbar>
		课程详情{{classname}}
		<view class="courseinfo">
			<view class="text">
				<u-text :text="'课程名称'+courseName"></u-text>
			</view>
			<view class="text">
				<u-text :text="'班级'+classname"></u-text>
			</view>
			<view class="text">

				<u-text :text="'上课时间:第'+whatClass+'节'+teachingStartTime"></u-text>
			</view>
		</view>
		<view class="studentinfo">
			<view class="title">
				学生信息
			</view>

			<view class="info">
				<uni-table border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="50" align="center">序号</uni-th>
						<uni-th width="80" align="center">姓名</uni-th>
						<uni-th width="80" align="center">状态</uni-th>
						<uni-th width="80" align="center">操作</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">{{ index+1 }}</uni-td>
						<uni-td align="center">
							<view class="name">{{ item.studentName }}</view>
						</uni-td>
						<uni-td align="center">
							<u-tag :text="item.tates===1?'已签到':'未签到' " size="mini"
								:type="item.tates===1?'success':'error'"></u-tag>
						</uni-td>
						<!-- <uni-td align="center">{{ item.tates===1?'已签到':'未签到' }}</uni-td> -->
						<!-- <uni-td align="center"><u-button text="修改"></u-button></uni-td> -->
						<uni-td align="center">
							<u-button :text="item.tates===1?'缺席':'签到'" :type="item.tates===1?'error':'success'"
								size="mini" @click="changeState(item.studentId,item.tates)">
							</u-button>
						</uni-td>
					</uni-tr>
				</uni-table>

			</view>

		</view>
		<MyButton buttonText="发布" buttonStyle="error" @deal="publish"></MyButton>
	</view>
</template>

<script>
	import MyButton from '../../components/MyButton/MyButton.vue'
	export default {
		components: {
			MyButton
		},
		data() {
			return {
				classname: '',
				courseName: '',
				whatClass: '',
				teachingStartTime: '',
				tableData: [],
			};
		},
		onLoad(option) {
			this.initData(option)
			this.getStudentData()
		},
		methods: {
			publish(){
				console.log('pubd')
			},
			changeState(studentId, tates) {
				console.log('tates', tates)
				tates = tates === 1 ? 2 : 1
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/SchoolStudentManage',
					method: 'PUT',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					data: {
						'id': studentId,
						'tates': tates
					},
					success: (res) => {
						console.log('change:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								//	this.getStudentData()   //操作成功之后，调用getStudentData重新加载表格数据
								// var item=this.tableData.filter(item=>{
								// 	return item.studentId === studentId
								// 	})
								// 	console.log('item',item)
								// this.tableData[0].tates=1
								var index = this.tableData.findIndex(item => {
									return item.studentId == studentId
								})
								console.log('index', index)
								this.tableData[index].tates = tates
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
			initData(option) {
				this.classname = option.classname
				this.courseName = option.courseName
				this.whatClass = option.whatClass
				this.teachingStartTime = option.teachingStartTime
			},
			getStudentData() {
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/classes/list?classname=' + this.classname,
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					success: (res) => {
						console.log('studentinfo:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								this.tableData = res.data.rows

							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
		}
	}
</script>

<style lang="scss">
	.couserdeatil-container {
		.courseinfo {
			border: 1px solid #8a8a8a;
			border-radius: 5px;
			margin: 45px 5px 0 5px;

			.text {
				margin: 15px;
			}
		}

		.studentinfo {
			.title {
				margin: 10px 0 10px 5px;
			}
		}
	}
</style>
